Okay, so I have a form people fill out to register for a database I'm creating. And the form was starting to get a little long, so I thought I'd make the DIV's positioning absolute, set the visibility to hidden, and create a small function to move the other DIV's down when wanting to expand the current DIV and move the other DIV's back when wanting to collapse the current DIV.
Make sense?

So my function to move the DIV's below the DIV we're focusing on is below.


function movemebackt(id,change,normal)
{

var moved = document.getElementById(id).style;
var topn = moved.top;
topn = topn.substring(0,topn.length-2);

if(moved.top != normal)
{
var movedn = topn - change;
moved.top = ""+movedn+"px";
}
else
{
var movedn = topn + change;
moved.top = ""+movedn+"px";
}
}


with the HTML being:

<a href="javascript:void()" onClick="javascript:collapse('courses');movemebackt('kids','1350','1900px');">Courses : (Click to show/hide courses information)</a>

Just in case, the 'collapse' function is below:

function collapse (id)
{
if(!document.getElementById) { exit; }
else {
menu_id=document.getElementById(id);
if(menu_id.style.visibility!="hidden")
{
menu_id.style.visibility="hidden";
}
else
{
menu_id.style.visibility="visible";
}
}
}

So, when I read that i think it should work.

But here's the problem


var moved = document.getElementById(id).style;
var topn = moved.top;
topn = topn.substring(0,topn.length-2);


When I grab document.getElementById(Id).style.top I get 1900px for example, so I cut off the last two characters with the next line of the function, so I end up with 1900, then I want to add 1900 and 'change' (which would be 1350 for this situation). But instead of getting the desired 3250, I get 19001350.

So it's still seeing 'topn' (1900) as a string, rather than just a number?

Any Ideas?

Greatly Appreciated,

thanks.

JJ.